<template>
<div class="task-ans">
	 <el-divider content-position="left">{{ tips }}</el-divider>
	 <pre class="task-code-ans"><code v-text="codeText"></code></pre> 
</div>
</template>

<script>
export default {
	props: {
		tips: {
			type: String, required: false, default: '答案'
		},
		code: {
			type: String, required: false
		}
	},
	computed: {
		codeText() {
			if (this.code == null || this.code === '') {
				return '暂无数据'
			}
			return this.code ;
		}
	}
}
</script>

<style scoped>
.task-ans {
	width: 100%;
}
.task-code-ans {
	width: 100%;
	background-color: #f2f2f2;
	padding: 10px 20px;
	overflow-x: auto;
}

.task-code-ans code {
	font-size: 18px;
	font-family: 'Courier New', Courier, monospace;
	tab-size: 4;
}

::-webkit-scrollbar {
  width: 3px; /* 设置垂直滚动条的宽度 */
  height: 3px; /* 设置水平滚动条的高度 */
}
 
::-webkit-scrollbar-thumb {
  background-color: #888; /* 设置滚动条滑块的颜色 */
  border-radius: 5px; /* 设置滚动条滑块的圆角 */
}
 
::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* 设置滚动条滑块在悬停时的颜色 */
}
 
::-webkit-scrollbar-track {
  background-color: #eee; /* 设置滚动条背景的颜色 */
}

</style>